import { resourcePath } from "../../../../../../../utils/resource";
import { Button, Table } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import CztApi from "../../../../../../../utils/apis/CztApi";
import { fromCircle } from "ol/geom/Polygon";
import PanelRight from "../../../../../../common/PanelRight";
export default function XqDetail(props) {
    const { newType, result, cztxl, jzzyxl, wkt, onUpdateXqList } = props;
    const [data, setData] = useState();
    console.log('data', data)


    useEffect(() => {
        if (newType === 'czt') {
            CztApi.cztxq(cztxl, fromCircle(wkt)).then(resp => {
                setData(resp.data);
            })
        } else {
            CztApi.jzzyxq(jzzyxl, fromCircle(wkt)).then(resp => {
                setData(resp.data);
            })
        }

    }, [cztxl, jzzyxl, wkt, newType])
    // console.log(data)
    const handleClick = (record) => {
        onUpdateXqList(record)
    }

    return <PanelRight>
        <div style={{
            // border: '1px solid rgba(9,107,225,0.8)',
            pointerEvents: 'auto',
            overflow: "auto",
            borderRadius: 8
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: 36,
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }} title={newType === 'czt' ? '承载体' : '减灾资源'}>
                        {newType === 'czt' ? '承载体' : '减灾资源'}
                    </div>
                </div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>
            </div>
            <Table style={{ marginTop: 10 }}
                columns={[{
                    title: '名称',
                    dataIndex: 'title'
                }, {
                    width: 80,
                    render: (text, record) => {
                        return <Button size="small" type="link" onClick={() => handleClick(record)}>详情</Button>
                    }
                }

                ]}
                dataSource={data} />
        </div>
    </PanelRight>
}